<template>
  <div class="notification-container">
    <el-card class="notification-card">
      <div slot="header" class="notification-header">
        <span>通知中心</span>
        <div>
          <el-button size="mini" @click="markAllRead" :disabled="allRead">全部标为已读</el-button>
          <el-button size="mini" type="danger" @click="clearAll">清空通知</el-button>
        </div>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, idx) in notifications"
          :key="item.id"
          :timestamp="item.time"
          :color="item.read ? '#909399' : '#409EFF'"
        >
          <div class="notification-item" :class="{ unread: !item.read }">
            <span class="type">【{{ item.type }}】</span>
            <span class="content">{{ item.content }}</span>
            <el-button v-if="!item.read" size="mini" type="text" @click="markRead(idx)">标为已读</el-button>
          </div>
        </el-timeline-item>
        <div v-if="notifications.length === 0" class="empty">暂无通知</div>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: []
    }
  },
  computed: {
    allRead() {
      return this.notifications.length > 0 && this.notifications.every(n => n.read)
    }
  },
  created() {
    this.loadNotifications()
  },
  methods: {
    loadNotifications() {
      // 可从localStorage加载，或模拟一些通知
      const local = JSON.parse(localStorage.getItem('notifications') || '[]')
      if (local.length) {
        this.notifications = local
      } else {
        this.notifications = [
          { id: 1, type: '库存预警', content: '全脂牛奶库存低于最低值，请及时补货。', time: '2024-06-01 09:00', read: false },
          { id: 2, type: '订单异常', content: '订单ORD002支付失败，请联系顾客处理。', time: '2024-06-01 08:30', read: false },
          { id: 3, type: '系统公告', content: '欢迎使用咖啡店管理系统！', time: '2024-05-31 18:00', read: true }
        ]
        localStorage.setItem('notifications', JSON.stringify(this.notifications))
      }
    },
    markRead(idx) {
      this.notifications[idx].read = true
      localStorage.setItem('notifications', JSON.stringify(this.notifications))
    },
    markAllRead() {
      this.notifications.forEach(n => n.read = true)
      localStorage.setItem('notifications', JSON.stringify(this.notifications))
    },
    clearAll() {
      this.$confirm('确定要清空所有通知吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.notifications = []
        localStorage.setItem('notifications', '[]')
        this.$message.success('已清空')
      })
    }
  }
}
</script>

<style scoped>
.notification-container {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}
.notification-card {
  width: 600px;
}
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.notification-item.unread .type {
  color: #409EFF;
  font-weight: bold;
}
.notification-item .type {
  margin-right: 8px;
}
.empty {
  text-align: center;
  color: #bbb;
  padding: 32px 0;
}
</style> 